<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流程详情 - 物料分析系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/styles.css">
</head>
<body class="bg-gray-100 p-6">
    <div class="max-w-7xl mx-auto">
        <!-- 页面标题和返回按钮 -->
        <div class="flex items-center mb-6">
            <button class="text-gray-600 hover:text-gray-900 mr-4" onclick="history.back()">
                <i class="fas fa-arrow-left"></i>
            </button>
            <h1 class="text-2xl font-bold text-gray-800">流程详情</h1>
        </div>

        <!-- 标签页导航 -->
        <div class="bg-white rounded-lg shadow-md mb-6">
            <div class="border-b border-gray-200">
                <nav class="flex -mb-px">
                    <button class="tab-button active py-4 px-6 text-blue-600 border-b-2 border-blue-600 font-medium" data-tab="basic-info">
                        基本信息
                    </button>
                    <button class="tab-button py-4 px-6 text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium" data-tab="material-list">
                        物料表
                    </button>
                    <button class="tab-button py-4 px-6 text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium" data-tab="approval-info">
                        审批信息
                    </button>
                </nav>
            </div>

            <!-- 基本信息标签页内容 -->
            <div class="tab-content active p-6" id="basic-info">
                <!-- 基本信息表单 -->
                <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">基本信息</h3>
                    <form id="basicInfoForm" class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">流程编号</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" value="PR-2023-001" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">流程标题</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" value="新项目物料分析" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">申请人工号</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" value="1001" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">申请人姓名</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" value="张三" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">申请人电话</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" value="13800138000" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">申请人邮箱</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" value="zhangsan@example.com" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">申请人部门</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" value="研发部" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">申请日期</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" value="2023-01-01" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                            <span class="status-badge processing">处理中</span>
                        </div>
                    </form>
                </div>

                <!-- 详细信息表单 -->
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">详细信息</h3>
                    <form id="detailInfoForm" class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">业务类型</label>
                            <select class="form-input w-full px-3 py-2 border rounded-lg" disabled>
                                <option value="底价" selected>底价</option>
                                <option value="单一资源">单一资源</option>
                                <option value="内部供应商议价">内部供应商议价</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">项目编号</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" value="PJ-2023-001" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">项目名称</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" value="新能源项目" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">预计需求时间</label>
                            <input type="date" class="form-input w-full px-3 py-2 border rounded-lg" value="2023-06-01" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">决标方式</label>
                            <select class="form-input w-full px-3 py-2 border rounded-lg" disabled>
                                <option value="分项决标" selected>分项决标</option>
                                <option value="总价决标">总价决标</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">补充说明</label>
                            <textarea class="form-input w-full px-3 py-2 border rounded-lg" rows="3" readonly>测试流程</textarea>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">生产产地</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" value="中国" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">表单说明</label>
                            <textarea class="form-input w-full px-3 py-2 border rounded-lg" rows="3" readonly>这是一个测试表单</textarea>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">采购项目管理人</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" value="李四" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">产品开发说明</label>
                            <textarea class="form-input w-full px-3 py-2 border rounded-lg" rows="3" readonly>新产品开发测试</textarea>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">表单编号</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" value="FM-2023-001" readonly>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 物料表标签页内容 -->
            <div class="tab-content hidden p-6" id="material-list">
                <!-- 查询条件 -->
                <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">查询条件</h3>
                    <form id="materialSearchForm" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">物料分析流程编号</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="analysisProcessCode">
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">物料分析状态</label>
                            <select class="form-input w-full px-3 py-2 border rounded-lg" name="analysisStatus">
                                <option value="">全部</option>
                                <option value="待分派">待分派</option>
                                <option value="待提交参数">待提交参数</option>
                                <option value="分析中">分析中</option>
                                <option value="科长审批中">科长审批中</option>
                                <option value="经理审批中">经理审批中</option>
                                <option value="已结案">已结案</option>
                                <option value="已取消">已取消</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">物料编码</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="materialCode">
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">物料描述</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="materialDescription">
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">物料组名称</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="groupName">
                        </div>
                        <div class="form-group md:col-span-4 flex justify-end space-x-4">
                            <button type="button" class="px-4 py-2 border rounded-lg hover:bg-gray-100" onclick="resetMaterialSearch()">
                                <i class="fas fa-redo mr-2"></i>重置
                            </button>
                            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                                <i class="fas fa-search mr-2"></i>查询
                            </button>
                        </div>
                    </form>
                </div>

                <!-- 操作按钮 -->
                <div class="action-buttons mb-6 flex justify-between items-center">
                    <div class="flex flex-wrap gap-2">
                        <button class="action-button px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" onclick="addMaterial()">
                            <i class="fas fa-plus mr-2"></i>新增物料
                        </button>
                        <button class="action-button px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700" onclick="importMaterialTable()">
                            <i class="fas fa-file-import mr-2"></i>导入物料表
                        </button>
                        <button class="action-button px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700" onclick="saveMaterialTable()">
                            <i class="fas fa-save mr-2"></i>保存物料表
                        </button>
                        <button class="action-button px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700" onclick="assignEngineers()">
                            <i class="fas fa-user-plus mr-2"></i>分派技术工程师
                        </button>
                        <button class="action-button px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700" onclick="cancelProcess()">
                            <i class="fas fa-times-circle mr-2"></i>取消流程
                        </button>
                        <button class="action-button px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700" onclick="cancelMaterials()">
                            <i class="fas fa-ban mr-2"></i>取消物料
                        </button>
                        <button class="action-button px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700" onclick="exportOriginalPrice()">
                            <i class="fas fa-file-export mr-2"></i>导出原价
                        </button>
                        <button class="action-button px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700" onclick="batchWithdrawMaterials()">
                            <i class="fas fa-undo mr-2"></i>批量撤回物料
                        </button>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span class="text-sm text-gray-600">共 <span id="totalCount">0</span> 条记录</span>
                        <select class="form-input px-3 py-2 border rounded-lg" id="pageSize" onchange="changePageSize()">
                            <option value="10">10条/页</option>
                            <option value="20">20条/页</option>
                            <option value="50">50条/页</option>
                            <option value="100">100条/页</option>
                        </select>
                    </div>
                </div>

                <!-- 物料列表 -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    <input type="checkbox" class="rounded text-blue-600" id="selectAllMaterials">
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('processCode')">
                                    物料分析流程编号 <i class="fas fa-sort"></i>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('status')">
                                    物料分析状态 <i class="fas fa-sort"></i>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('materialCode')">
                                    物料编码 <i class="fas fa-sort"></i>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('description')">
                                    物料描述 <i class="fas fa-sort"></i>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('groupName')">
                                    物料组名称 <i class="fas fa-sort"></i>
                                </th>
                                <!-- OA流程特有字段 -->
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('materialLevel')">
                                    物料等级 <i class="fas fa-sort"></i>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('unit')">
                                    计量单位 <i class="fas fa-sort"></i>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('unitUsage')">
                                    单车用量 <i class="fas fa-sort"></i>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('materialSpec')">
                                    材料/规格 <i class="fas fa-sort"></i>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('productWeight')">
                                    产品重量 <i class="fas fa-sort"></i>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('hasStandardPart')">
                                    标准库是否有同类标准件 <i class="fas fa-sort"></i>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('isAfterSales')">
                                    是否售后专用 <i class="fas fa-sort"></i>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('plmDocName')">
                                    PLM技术资料名称 <i class="fas fa-sort"></i>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('valueAnalysisLink')">
                                    价值分析参数附件链接 <i class="fas fa-sort"></i>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('hasMold')">
                                    是否开模 <i class="fas fa-sort"></i>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('remark')">
                                    备注 <i class="fas fa-sort"></i>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('technicalLeader')">
                                    技术负责人 <i class="fas fa-sort"></i>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('valueEngineer')">
                                    价值分析工程师 <i class="fas fa-sort"></i>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('applicant')">
                                    申请人 <i class="fas fa-sort"></i>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200" id="materialTableBody">
                            <!-- 物料行将通过JavaScript动态添加 -->
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                <div class="flex justify-between items-center mt-4">
                    <div class="text-sm text-gray-600">
                        显示第 <span id="startIndex">0</span> 到 <span id="endIndex">0</span> 条，共 <span id="totalCount2">0</span> 条记录
                    </div>
                    <div class="flex space-x-2">
                        <button class="px-3 py-1 border rounded-lg hover:bg-gray-100" onclick="previousPage()" id="prevPage">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <div class="flex space-x-1" id="pageNumbers">
                            <!-- 页码将通过JavaScript动态添加 -->
                        </div>
                        <button class="px-3 py-1 border rounded-lg hover:bg-gray-100" onclick="nextPage()" id="nextPage">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 审批信息标签页内容 -->
            <div class="tab-content hidden p-6" id="approval-info">
                <!-- 审批记录 -->
                <div class="space-y-6">
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">审批记录</h3>
                        <div class="space-y-4" id="approvalRecords">
                            <!-- 审批记录将通过JavaScript动态添加 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 新增物料模态框 -->
    <div id="addMaterialModal" class="modal">
        <div class="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-800">新增物料</h3>
                <button class="text-gray-500 hover:text-gray-700" onclick="closeAddMaterialModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form id="addMaterialForm" class="space-y-4">
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1 required">物料编码</label>
                    <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" required>
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1 required">物料描述</label>
                    <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" required>
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1">物料组名称</label>
                    <input type="text" class="form-input w-full px-3 py-2 border rounded-lg">
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1">零部件编号</label>
                    <input type="text" class="form-input w-full px-3 py-2 border rounded-lg">
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1">单位</label>
                    <input type="text" class="form-input w-full px-3 py-2 border rounded-lg">
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1">预估数量</label>
                    <input type="number" class="form-input w-full px-3 py-2 border rounded-lg">
                </div>
                <div class="flex justify-end space-x-4">
                    <button type="button" class="px-4 py-2 border rounded-lg hover:bg-gray-100" onclick="closeAddMaterialModal()">取消</button>
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">保存</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 导入物料表模态框 -->
    <div id="importMaterialModal" class="modal">
        <div class="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-800">导入物料表</h3>
                <button class="text-gray-500 hover:text-gray-700" onclick="closeImportMaterialModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="space-y-4">
                <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
                    <i class="fas fa-file-excel text-4xl text-green-500 mb-2"></i>
                    <p class="text-gray-600 mb-2">拖拽Excel文件到此处或点击上传</p>
                    <input type="file" id="materialFile" class="hidden" accept=".xlsx,.xls">
                    <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" onclick="document.getElementById('materialFile').click()">
                        选择文件
                    </button>
                </div>
                <div class="flex justify-end space-x-4">
                    <button class="px-4 py-2 border rounded-lg hover:bg-gray-100" onclick="closeImportMaterialModal()">取消</button>
                    <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" onclick="handleFileUpload()">导入</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 分派工程师模态框 -->
    <div id="assignEngineerModal" class="modal">
        <div class="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-800">分派技术工程师</h3>
                <button class="text-gray-500 hover:text-gray-700" onclick="closeAssignEngineerModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="space-y-4">
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1 required">搜索工程师</label>
                    <div class="flex space-x-2">
                        <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" id="engineerSearch" placeholder="输入工号或姓名">
                        <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" onclick="searchEngineers()">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                    <div id="engineerSearchResults" class="mt-2 max-h-40 overflow-y-auto border rounded-lg hidden">
                        <!-- 搜索结果将通过JavaScript动态添加 -->
                    </div>
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1">备注</label>
                    <textarea class="form-input w-full px-3 py-2 border rounded-lg" rows="3" id="engineerNote"></textarea>
                </div>
                <div class="flex justify-end space-x-4">
                    <button class="px-4 py-2 border rounded-lg hover:bg-gray-100" onclick="closeAssignEngineerModal()">取消</button>
                    <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" onclick="confirmAssignEngineer()">确认分派</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 批量退回物料模态框 -->
    <div id="withdrawMaterialModal" class="modal">
        <div class="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-800">批量退回物料</h3>
                <button class="text-gray-500 hover:text-gray-700" onclick="closeWithdrawMaterialModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="space-y-4">
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1 required">物料选取范围</label>
                    <select class="form-input w-full px-3 py-2 border rounded-lg" id="materialRange">
                        <option value="">请选择范围</option>
                        <option value="selected">已选物料</option>
                        <option value="all">全部物料</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1 required">退回节点</label>
                    <select class="form-input w-full px-3 py-2 border rounded-lg" id="withdrawNode">
                        <option value="">请选择节点</option>
                        <option value="technical">技术工程师</option>
                        <option value="value">价值分析工程师</option>
                        <option value="approval">审批节点</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1 required">退回原因</label>
                    <textarea class="form-input w-full px-3 py-2 border rounded-lg" rows="3" id="withdrawReason" required></textarea>
                </div>
                <div class="flex justify-end space-x-4">
                    <button class="px-4 py-2 border rounded-lg hover:bg-gray-100" onclick="closeWithdrawMaterialModal()">取消</button>
                    <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" onclick="confirmWithdrawMaterials()">确认退回</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 取消流程模态框 -->
    <div id="cancelProcessModal" class="modal">
        <div class="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-800">取消流程</h3>
                <button class="text-gray-500 hover:text-gray-700" onclick="closeCancelProcessModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="space-y-4">
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1 required">取消原因</label>
                    <textarea class="form-input w-full px-3 py-2 border rounded-lg" rows="3" id="cancelReason" required></textarea>
                </div>
                <div class="flex justify-end space-x-4">
                    <button class="px-4 py-2 border rounded-lg hover:bg-gray-100" onclick="closeCancelProcessModal()">取消</button>
                    <button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700" onclick="confirmCancelProcess()">确认取消</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 工程师选择模态框 -->
    <div id="engineerSelectModal" class="modal">
        <div class="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-800">选择工程师</h3>
                <button class="text-gray-500 hover:text-gray-700" onclick="closeEngineerSelectModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="space-y-4">
                <div class="form-group">
                    <div class="flex space-x-2">
                        <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" id="engineerSearch" placeholder="输入工号或姓名">
                        <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" onclick="searchEngineers()">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                <div id="engineerSearchResults" class="max-h-60 overflow-y-auto border rounded-lg">
                    <!-- 搜索结果将通过JavaScript动态添加 -->
                </div>
                <div class="flex justify-end space-x-4">
                    <button class="px-4 py-2 border rounded-lg hover:bg-gray-100" onclick="closeEngineerSelectModal()">取消</button>
                    <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" onclick="confirmEngineerSelect()">确认</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 标签页切换
        document.querySelectorAll('.tab-button').forEach(button => {
            button.addEventListener('click', () => {
                const tabId = button.getAttribute('data-tab');
                
                // 移除所有标签页的active类
                document.querySelectorAll('.tab-button').forEach(btn => {
                    btn.classList.remove('active', 'text-blue-600', 'border-blue-600');
                    btn.classList.add('text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
                });
                
                // 隐藏所有标签内容
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.add('hidden');
                });

                // 添加当前标签页的active类
                button.classList.remove('text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
                button.classList.add('active', 'text-blue-600', 'border-blue-600');

                // 显示对应的内容
                const content = document.getElementById(tabId);
                if (content) {
                    content.classList.remove('hidden');
                    content.classList.add('active');
                }

                // 如果是物料表标签，加载物料数据
                if (tabId === 'material-list') {
                    loadMaterials();
                }
            });
        });

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 获取URL参数
            const urlParams = new URLSearchParams(window.location.search);
            const processCode = urlParams.get('code');
            
            if (processCode) {
                // 加载流程数据
                loadProcessData(processCode);
            } else {
                alert('未找到流程编号');
                window.location.href = 'process-list.html';
            }

            // 默认显示第一个标签页
            const defaultTab = document.querySelector('.tab-button.active');
            if (defaultTab) {
                const tabId = defaultTab.getAttribute('data-tab');
                const content = document.getElementById(tabId);
                if (content) {
                    content.classList.remove('hidden');
                    content.classList.add('active');
                }
            }
        });

        // 加载流程数据
        function loadProcessData(processCode) {
            // 这里应该调用后端API获取流程数据
            // 模拟数据
            const mockData = {
                processCode: processCode,
                title: '新项目物料分析',
                applicantId: '1001',
                applicantName: '张三',
                applicantPhone: '13800138000',
                applicantEmail: 'zhangsan@example.com',
                applicantDepartment: '研发部',
                applicationDate: '2023-01-01',
                status: '处理中', // 可能的状态：草稿、处理中、待核价审核、待财务归档、已关闭、退回修改中
                businessType: '底价',
                projectCode: 'PJ-2023-001',
                projectName: '新能源项目',
                expectedDemandTime: '2023-06-01',
                bidType: '分项决标',
                supplement: '测试流程',
                productionLocation: '中国',
                formDescription: '这是一个测试表单',
                procurementManager: '李四',
                productDevelopment: '新产品开发测试',
                formCode: 'FM-2023-001'
            };

            // 更新基本信息表单
            document.querySelector('input[value="PR-2023-001"]').value = mockData.processCode;
            document.querySelector('input[value="新项目物料分析"]').value = mockData.title;
            document.querySelector('input[value="1001"]').value = mockData.applicantId;
            document.querySelector('input[value="张三"]').value = mockData.applicantName;
            document.querySelector('input[value="13800138000"]').value = mockData.applicantPhone;
            document.querySelector('input[value="zhangsan@example.com"]').value = mockData.applicantEmail;
            document.querySelector('input[value="研发部"]').value = mockData.applicantDepartment;
            document.querySelector('input[value="2023-01-01"]').value = mockData.applicationDate;
            document.querySelector('span.status-badge').textContent = mockData.status;
            document.querySelector('span.status-badge').className = `status-badge ${getStatusClass(mockData.status)}`;

            // 更新按钮显示
            updateButtonsByStatus(mockData.status);

            // 加载物料数据
            loadMaterials();
        }

        // 显示新增物料模态框
        function showAddMaterialModal() {
            document.getElementById('addMaterialModal').style.display = 'block';
        }

        // 关闭新增物料模态框
        function closeAddMaterialModal() {
            document.getElementById('addMaterialModal').style.display = 'none';
        }

        // 处理新增物料表单提交
        document.getElementById('addMaterialForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const formData = new FormData(this);
            const materialData = {};
            formData.forEach((value, key) => {
                materialData[key] = value;
            });

            // 添加物料到表格
            addMaterialToTable(materialData);
            
            // 关闭模态框
            closeAddMaterialModal();
            
            // 重置表单
            this.reset();
        });

        // 添加物料到表格
        function addMaterialToTable(materialData) {
            const tbody = document.getElementById('materialTableBody');
            const tr = document.createElement('tr');
            tr.className = 'hover:bg-gray-50';
            
            tr.innerHTML = `
                <td class="px-6 py-4 whitespace-nowrap">
                    <input type="checkbox" class="material-checkbox rounded text-blue-600">
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData['物料编码']}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData['物料描述']}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData['物料组名称']}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData['零部件编号']}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData['单位']}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData['预估数量']}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData['供应商编码']}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData['供应商名称']}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData['分析流程编号']}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData['状态']}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                    <button class="text-blue-600 hover:text-blue-800 mr-3" onclick="editMaterial(this)">编辑</button>
                    <button class="text-red-600 hover:text-red-800" onclick="deleteMaterial(this)">删除</button>
                </td>
            `;
            
            tbody.appendChild(tr);
        }

        // 编辑物料
        function editMaterial(button) {
            const row = button.closest('tr');
            const cells = row.cells;
            
            // 获取当前物料数据
            const materialData = {
                '物料编码': cells[1].textContent,
                '物料描述': cells[2].textContent,
                '物料组名称': cells[3].textContent,
                '零部件编号': cells[4].textContent,
                '单位': cells[5].textContent,
                '预估数量': cells[6].textContent
            };
            
            // 填充表单
            const form = document.getElementById('addMaterialForm');
            Object.keys(materialData).forEach(key => {
                const input = form.querySelector(`input[name="${key}"]`);
                if (input) {
                    input.value = materialData[key];
                }
            });
            
            // 显示模态框
            showAddMaterialModal();
            
            // 标记为编辑模式
            form.dataset.editMode = 'true';
            form.dataset.editRow = row.rowIndex;
        }

        // 删除物料
        function deleteMaterial(button) {
            if (confirm('确定要删除这条物料记录吗？此操作不可恢复。')) {
                const row = button.closest('tr');
                const status = row.cells[7].querySelector('.status-badge').textContent;
                
                if (status !== '待分派') {
                    alert('只能删除状态为"待分派"的物料');
                    return;
                }
                
                row.remove();
            }
        }

        // 全选/取消全选
        document.getElementById('selectAllMaterials').addEventListener('change', function() {
            const checkboxes = document.querySelectorAll('.material-checkbox');
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
        });

        // 导入物料表
        function importMaterialTable() {
            document.getElementById('importMaterialModal').style.display = 'block';
        }

        function closeImportMaterialModal() {
            document.getElementById('importMaterialModal').style.display = 'none';
        }

        function handleFileUpload() {
            const fileInput = document.getElementById('materialFile');
            const file = fileInput.files[0];
            
            if (!file) {
                alert('请选择要导入的文件');
                return;
            }

            // 这里应该调用后端API处理文件上传
            // 模拟导入成功
            alert('物料表导入成功！');
            closeImportMaterialModal();
        }

        // 保存物料表
        function saveMaterialTable() {
            const materials = [];
            const rows = document.querySelectorAll('#materialTableBody tr');
            
            rows.forEach(row => {
                const cells = row.cells;
                materials.push({
                    materialCode: cells[1].textContent,
                    description: cells[2].textContent,
                    groupName: cells[3].textContent,
                    partNumber: cells[4].textContent,
                    unit: cells[5].textContent,
                    estimatedQuantity: cells[6].textContent,
                    status: cells[7].querySelector('.status-badge').textContent
                });
            });

            // 这里应该调用后端API保存数据
            // 模拟保存成功
            alert('物料表保存成功！');
        }

        // 分派技术工程师
        function assignEngineers() {
            const selectedRows = document.querySelectorAll('.material-checkbox:checked');
            if (selectedRows.length === 0) {
                alert('请选择要分派的物料');
                return;
            }
            document.getElementById('assignEngineerModal').style.display = 'block';
        }

        function closeAssignEngineerModal() {
            document.getElementById('assignEngineerModal').style.display = 'none';
        }

        function confirmAssignEngineer() {
            const engineerSelect = document.getElementById('engineerSearch').value;
            const engineerNote = document.getElementById('engineerNote').value;
            
            if (!engineerSelect) {
                alert('请选择工程师');
                return;
            }

            const selectedRows = document.querySelectorAll('.material-checkbox:checked');
            selectedRows.forEach(checkbox => {
                const row = checkbox.closest('tr');
                const statusCell = row.cells[7];
                statusCell.innerHTML = '<span class="status-badge processing">处理中</span>';
            });

            // 这里应该调用后端API保存分派信息
            // 模拟分派成功
            alert('工程师分派成功！');
            closeAssignEngineerModal();
        }

        // 修改表单提交处理
        document.getElementById('addMaterialForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const materialData = {};
            formData.forEach((value, key) => {
                materialData[key] = value;
            });

            if (this.dataset.editMode === 'true') {
                // 更新现有行
                const rowIndex = parseInt(this.dataset.editRow);
                const row = document.querySelector(`#materialTableBody tr:nth-child(${rowIndex})`);
                if (row) {
                    const cells = row.cells;
                    cells[1].textContent = materialData['物料编码'];
                    cells[2].textContent = materialData['物料描述'];
                    cells[3].textContent = materialData['物料组名称'];
                    cells[4].textContent = materialData['零部件编号'];
                    cells[5].textContent = materialData['单位'];
                    cells[6].textContent = materialData['预估数量'];
                }
            } else {
                // 添加新行
                addMaterialToTable(materialData);
            }
            
            // 关闭模态框并重置表单
            closeAddMaterialModal();
            this.reset();
            delete this.dataset.editMode;
            delete this.dataset.editRow;
        });

        // 查询相关功能
        let currentPage = 1;
        let pageSize = 10;
        let totalCount = 0;
        let sortField = '';
        let sortOrder = 'asc';
        let searchParams = {};

        // 初始化查询
        document.getElementById('materialSearchForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            searchParams = {};
            formData.forEach((value, key) => {
                if (value) searchParams[key] = value;
            });
            currentPage = 1;
            loadMaterials();
        });

        // 重置查询
        function resetMaterialSearch() {
            document.getElementById('materialSearchForm').reset();
            searchParams = {};
            currentPage = 1;
            loadMaterials();
        }

        // 改变每页显示数量
        function changePageSize() {
            pageSize = parseInt(document.getElementById('pageSize').value);
            currentPage = 1;
            loadMaterials();
        }

        // 表格排序
        function sortTable(field) {
            if (sortField === field) {
                sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
            } else {
                sortField = field;
                sortOrder = 'asc';
            }
            loadMaterials();
        }

        // 加载物料数据
        function loadMaterials() {
            // 这里应该调用后端API获取数据
            // 模拟数据
            const mockData = [
                {
                    materialCode: 'M001',
                    materialDescription: '测试物料1',
                    status: '待分派',
                    groupName: '测试组1',
                    partNumber: 'P001',
                    unit: '个',
                    estimatedQuantity: 100,
                    supplierCode: 'S001',
                    supplierName: '供应商1',
                    hasMoldFee: true,
                    hasCertificationFee: false,
                    hasTestFee: true,
                    hasDevelopmentFee: false,
                    technicalEngineer: '张三',
                    valueEngineer: '李四',
                    currentUser: '张三',
                    applicant: '王五',
                    singleResourceReason: '独家技术',
                    materialLevel: 'A',
                    unitUsage: 1,
                    materialSpec: '钢材',
                    productWeight: 100,
                    hasStandardPart: true,
                    isAfterSales: false,
                    plmDocName: '技术文档1',
                    valueAnalysisLink: 'http://example.com',
                    hasMold: true,
                    remark: '测试备注',
                    technicalLeader: '赵六'
                }
                // 更多模拟数据...
            ];

            // 更新表格
            updateTable(mockData);
            
            // 更新分页信息
            updatePagination();
        }

        // 更新表格
        function updateTable(data) {
            const tbody = document.getElementById('materialTableBody');
            tbody.innerHTML = '';
            
            data.forEach(item => {
                const tr = document.createElement('tr');
                tr.className = 'hover:bg-gray-50';
                tr.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap">
                        <input type="checkbox" class="material-checkbox rounded text-blue-600">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.materialCode}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.materialDescription}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.groupName}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.partNumber}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.unit}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.estimatedQuantity}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.supplierCode}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.supplierName}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        <a href="material-analysis-detail.html?code=${item.analysisProcessCode}" class="text-blue-600 hover:text-blue-800">${item.analysisProcessCode}</a>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.status}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.technicalEngineer}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.valueEngineer}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.currentUser}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.applicant}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.singleResourceReason}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.materialLevel}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.unitUsage}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.materialSpec}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.productWeight}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.hasStandardPart ? '是' : '否'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.isAfterSales ? '是' : '否'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.plmDocName}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.valueAnalysisLink}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.hasMold ? '是' : '否'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.remark}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.technicalLeader}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        <div class="flex space-x-2">
                            <button class="text-blue-600 hover:text-blue-800" onclick="editMaterial(this)">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="text-red-600 hover:text-red-800" onclick="deleteMaterial(this)">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </td>
                `;
                tbody.appendChild(tr);
            });
        }

        // 获取状态样式类
        function getStatusClass(status) {
            switch (status) {
                case '草稿':
                    return 'draft';
                case '处理中':
                    return 'processing';
                case '待核价审核':
                    return 'pending-review';
                case '待财务归档':
                    return 'pending-archive';
                case '已关闭':
                    return 'completed';
                case '退回修改中':
                    return 'returned';
                default:
                    return '';
            }
        }

        // 更新分页信息
        function updatePagination() {
            const totalPages = Math.ceil(totalCount / pageSize);
            
            // 更新页码显示
            const pageNumbers = document.getElementById('pageNumbers');
            pageNumbers.innerHTML = '';
            
            for (let i = 1; i <= totalPages; i++) {
                const button = document.createElement('button');
                button.className = `px-3 py-1 border rounded-lg ${i === currentPage ? 'bg-blue-600 text-white' : 'hover:bg-gray-100'}`;
                button.textContent = i;
                button.onclick = () => goToPage(i);
                pageNumbers.appendChild(button);
            }
            
            // 更新记录数显示
            document.getElementById('totalCount').textContent = totalCount;
            document.getElementById('totalCount2').textContent = totalCount;
            document.getElementById('startIndex').textContent = (currentPage - 1) * pageSize + 1;
            document.getElementById('endIndex').textContent = Math.min(currentPage * pageSize, totalCount);
            
            // 更新上一页/下一页按钮状态
            document.getElementById('prevPage').disabled = currentPage === 1;
            document.getElementById('nextPage').disabled = currentPage === totalPages;
        }

        // 翻页功能
        function goToPage(page) {
            currentPage = page;
            loadMaterials();
        }

        function previousPage() {
            if (currentPage > 1) {
                currentPage--;
                loadMaterials();
            }
        }

        function nextPage() {
            const totalPages = Math.ceil(totalCount / pageSize);
            if (currentPage < totalPages) {
                currentPage++;
                loadMaterials();
            }
        }

        // 新增操作按钮功能
        function cancelProcess() {
            document.getElementById('cancelProcessModal').style.display = 'block';
        }

        function closeCancelProcessModal() {
            document.getElementById('cancelProcessModal').style.display = 'none';
        }

        function confirmCancelProcess() {
            const cancelReason = document.getElementById('cancelReason').value;
            if (!cancelReason) {
                alert('请填写取消原因');
                return;
            }

            // 这里应该调用后端API取消流程
            // 模拟取消成功
            alert('流程已取消');
            closeCancelProcessModal();
            loadMaterials();
        }

        function cancelMaterials() {
            const selectedRows = document.querySelectorAll('.material-checkbox:checked');
            if (selectedRows.length === 0) {
                alert('请选择要取消的物料');
                return;
            }
            if (confirm('确定要取消选中的物料吗？此操作不可恢复。')) {
                // 这里应该调用后端API取消物料
                alert('物料已取消');
            }
        }

        function exportOriginalPrice() {
            const selectedRows = document.querySelectorAll('.material-checkbox:checked');
            if (selectedRows.length === 0) {
                alert('请选择要导出原价的物料');
                return;
            }
            // 这里应该调用后端API导出原价
            alert('原价导出成功');
        }

        function batchWithdrawMaterials() {
            const selectedRows = document.querySelectorAll('.material-checkbox:checked');
            if (selectedRows.length === 0) {
                alert('请选择要退回的物料');
                return;
            }
            if (confirm('确定要退回选中的物料吗？')) {
                // 这里应该打开批量退回物料的模态框
                console.log('批量退回物料', selectedRows);
            }
        }

        // 工程师选择相关功能
        let currentEngineerType = '';

        function showEngineerSelectModal(type) {
            currentEngineerType = type;
            document.getElementById('engineerSelectModal').style.display = 'block';
            searchEngineers();
        }

        function closeEngineerSelectModal() {
            document.getElementById('engineerSelectModal').style.display = 'none';
        }

        function searchEngineers() {
            const searchText = document.getElementById('engineerSearch').value;
            const resultsDiv = document.getElementById('engineerSearchResults');
            resultsDiv.innerHTML = '';

            // 这里应该调用后端API搜索工程师
            // 模拟数据
            const mockResults = [
                { id: 'E001', name: '张三', department: '研发部' },
                { id: 'E002', name: '李四', department: '研发部' }
            ];

            mockResults.forEach(engineer => {
                const div = document.createElement('div');
                div.className = 'p-2 hover:bg-gray-100 cursor-pointer';
                div.innerHTML = `
                    <div class="font-medium">${engineer.name} (${engineer.id})</div>
                    <div class="text-sm text-gray-500">${engineer.department}</div>
                `;
                div.onclick = () => selectEngineer(engineer);
                resultsDiv.appendChild(div);
            });
        }

        function selectEngineer(engineer) {
            const resultsDiv = document.getElementById('engineerSearchResults');
            resultsDiv.querySelectorAll('div').forEach(div => {
                div.classList.remove('bg-blue-100');
            });
            event.currentTarget.classList.add('bg-blue-100');
        }

        function confirmEngineerSelect() {
            const selectedEngineer = document.querySelector('#engineerSearchResults .bg-blue-100');
            if (selectedEngineer) {
                const engineerName = selectedEngineer.querySelector('.font-medium').textContent;
                document.querySelector(`input[name="${currentEngineerType}Engineer"]`).value = engineerName;
            }
            closeEngineerSelectModal();
        }

        // 物料编码计数
        document.querySelector('textarea[name="materialCodes"]').addEventListener('input', function() {
            const count = this.value.split('\n').filter(line => line.trim() !== '').length;
            document.getElementById('materialCodeCount').textContent = count;
            if (count > 500) {
                alert('物料编码数量不能超过500条');
                this.value = this.value.split('\n').slice(0, 500).join('\n');
                document.getElementById('materialCodeCount').textContent = 500;
            }
        });

        // 导出功能
        function exportMaterials() {
            const selectedRows = document.querySelectorAll('.material-checkbox:checked');
            if (selectedRows.length === 0) {
                alert('请选择要导出的物料');
                return;
            }

            // 这里应该调用后端API导出数据
            // 模拟导出
            const exportData = [];
            selectedRows.forEach(checkbox => {
                const row = checkbox.closest('tr');
                const cells = row.cells;
                exportData.push({
                    processCode: cells[1].textContent,
                    status: cells[2].querySelector('.status-badge').textContent,
                    materialCode: cells[3].textContent,
                    description: cells[4].textContent,
                    groupName: cells[5].textContent,
                    partNumber: cells[6].textContent,
                    unit: cells[8].textContent,
                    estimatedQuantity: cells[9].textContent,
                    technicalEngineer: cells[15].textContent,
                    valueEngineer: cells[16].textContent
                });
            });

            // 创建CSV文件
            const csvContent = "data:text/csv;charset=utf-8," 
                + Object.keys(exportData[0]).join(",") + "\n"
                + exportData.map(row => Object.values(row).join(",")).join("\n");
            
            const encodedUri = encodeURI(csvContent);
            const link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", "物料数据.csv");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        // 根据流程状态更新按钮显示
        function updateButtonsByStatus(status) {
            const buttons = {
                initiateDispatchBtn: ['草稿'],
                batchReturnBtn: ['待核价审核'],
                submitPricingBtn: ['退回修改中', '待核价审核'],
                completeArchiveBtn: ['待财务归档'],
                withdrawArchiveBtn: ['待财务归档']
            };

            Object.keys(buttons).forEach(buttonId => {
                const button = document.getElementById(buttonId);
                if (button) {
                    button.style.display = buttons[buttonId].includes(status) ? 'block' : 'none';
                }
            });
        }

        // 发起分派
        function initiateDispatch() {
            if (confirm('确定要发起分派吗？此操作将生成所有物料的子流程。')) {
                // 这里应该调用后端API发起分派
                // 模拟发起分派成功
                alert('分派成功！');
                loadProcessData(processCode);
            }
        }

        // 提交核价
        function submitPricing() {
            if (confirm('确定要提交核价吗？')) {
                // 这里应该调用后端API提交核价
                // 模拟提交成功
                alert('核价提交成功！');
                loadProcessData(processCode);
            }
        }

        // 完成归档
        function completeArchive() {
            if (confirm('确定要完成归档吗？')) {
                // 这里应该调用后端API完成归档
                // 模拟归档成功
                alert('归档完成！');
                loadProcessData(processCode);
            }
        }

        // 异常撤回
        function withdrawArchive() {
            if (confirm('确定要撤回归档吗？此操作需要财务总监审批。')) {
                // 这里应该调用后端API撤回归档
                // 模拟撤回成功
                alert('归档已撤回！');
                loadProcessData(processCode);
            }
        }

        // 添加物料状态样式类函数
        function getMaterialStatusClass(status) {
            switch (status) {
                case '待分派':
                    return 'pending';
                case '待提交参数':
                    return 'pending-parameters';
                case '分析中':
                    return 'analyzing';
                case '科长审批中':
                    return 'supervisor-review';
                case '经理审批中':
                    return 'manager-review';
                case '已结案':
                    return 'completed';
                default:
                    return '';
            }
        }
    </script>
</body>
</html> 